<template>
  <el-menu :default-openeds="['1','2','3']" class="el-menu-vertical-demo">
    <el-menu-item index="0" @click="toVue('welcome')">
      <el-icon><Menu /></el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-sub-menu index="1">
      <template #title>
        <el-icon><Menu /></el-icon>
        <span>供应商管理</span>
      </template>
      <el-menu-item index="1-1" @click="toVue('providerAdd')">
        <el-icon><Help /></el-icon>
        <span>添加供应商</span>
      </el-menu-item>
      <el-menu-item index="1-2" @click="toVue('providerList')">
        <el-icon><Help /></el-icon>
        <span>供应商列表</span>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Menu /></el-icon>
        <span>账单管理</span>
      </template>
      <el-menu-item index="2-1" @click="toVue('billAdd')">
        <el-icon><Help /></el-icon>
        <span>添加账单</span>
      </el-menu-item>
      <el-menu-item index="2-2" @click="toVue('billList')">
        <el-icon><Help /></el-icon>
        <span>账单列表</span>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3" v-if="userRole === 1 || userRole === 2">
      <template #title>
        <el-icon><Menu /></el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item index="3-1" @click="toVue('userAdd')">
        <el-icon><Help /></el-icon>
        <span>添加用户</span>
      </el-menu-item>
      <el-menu-item index="3-2" @click="toVue('UserList')">
        <el-icon><Help /></el-icon>
        <span>用户列表</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { Menu, Help } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'

const router = useRouter()
const userRole = ref(null)

onMounted(() => {
  const loginUserStr = localStorage.getItem('loginUser')
  if (loginUserStr) {
    const user = JSON.parse(loginUserStr)
    userRole.value = user.userRole || user.role?.id || null
    console.log('当前用户角色ID:', userRole.value)
    console.log('用户信息:', user)
  }
})

function toVue(page) {
  router.push({ path: `/homepage/${page}` })
}
</script>